<template>
  <a-layout-header style="background: #fff; padding: 0" class="header-warp">
      <!-- <div class="logo-title" :style="{'display':!collapsed?'none':''}"></div>
      <div class="logo-title" :style="{'display':collapsed?'none':''}">团务管理系统</div> -->
      <div class="logo-title">团务管理系统</div>
    <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="change" />
    <!-- <a-switch
      class="theme"
      defaultChecked
      @change="changeTheme"
      checkedChildren="dark"
      unCheckedChildren="light"
    /> -->
    <div  class="person">
      <span style="font-size: 14px; color: rgba(0, 0, 0, 0.65);margin-right: 10px;">
        <!-- <a-icon type="notification" style="margin-right: 10px;" /> -->
        <div class="person-l">
           <div class="flex items-center mr-4">
              <a-badge :count="count">
                <img class="header-ysq" @click="news" src="@/assets/image/yangshengqi.png"/>
              </a-badge>
            </div>  
           <div> {{userInfo.name}}</div>  
        </div>
     
      </span>
      <a-dropdown>
        <!-- <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          <a-avatar :size="36" icon="user" class="flex items-center align-middle" style="backgroundColor:#87d068" />
        </a> -->
         <a class="ant-dropdown-link user-img" @click="e => e.preventDefault()">
           <div>  <img class="header-ysq" src="@/assets/image/yonghu.png"/></div>
         </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;" @click="go">个人中心</a>
          </a-menu-item>
          <a-menu-item @click="logout">
            <a href="javascript:;">退出</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-layout-header>
</template>
<style lang="less" scoped>
.header-warp {
  display: flex;
  justify-content: flex-start;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  .person {
    position: absolute;
    right: 25px;
    display: flex;
    .person-l{
      display:flex;
      align-items: center;
    }
  }
  .theme{
    align-self: center;
  }
  .trigger {
    align-self: center;
    font-size: 18px;
    // line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    &:hover {
      color: #DD4C4C;
    }
  }
  .header-ysq{
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  .user-img{
    display: flex;
    align-items: center;
  }
}
</style>
<script>
import Bus from "@common/bus";
export default {
  name: "Header",
  data() {
    return {
      userInfo: {},
      collapsed: false,
      theme: 'dark',
      count: 0
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    this.getNoRead()
  },
  methods: {
    getNoRead() {
      this.$ajax({
        url: this.$api.news.noReadList,
        data: {
          member_id: this.userInfo.member_id
        },
        success: (result) => {
          if(result && result.length){
            this.count = result.length
          }
        },
        fail: (err) => {
          this.$message.success(err);
        },
      });
    },
    go(){
      this.$router.push(`/person`);
    },
    news(){
      this.$router.push(`/news/list`);
    },
    logout() {
      localStorage.clear();
      sessionStorage.clear();
      window.location.href = window.location.origin;
    },
    change() {
      this.collapsed = !this.collapsed;
      Bus.$emit("collapsed", this.collapsed);
    },
    changeTheme() {
      if (this.theme === 'light') {
        this.theme = 'dark'
      } else {
        this.theme = 'light'
      }
      Bus.$emit("theme", this.theme);
    }
  }
};
</script>